<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<script type="text/javascript">
	$(document).ready(function(){
		rounder()
	});
</script>
<script type="text/JavaScript">

  function rounder()
  {
    settings = {
      tl: { radius: 5 },
      tr: { radius: 5 },
      bl: { radius: 5 },
      br: { radius: 5 },
      antiAlias: true,
      autoPad: true
    }

    var objs = $(".roundCorners");
	for (var i = 0; i < objs.length; i++) {
		var obj = objs[i]; 
    	var cornersObj = new curvyCorners(settings, obj);
    	cornersObj.applyCornersToAll();
    }    
  }
  
  function selectImportOnLocal(el, img) {
  	files.import[img] = !(files.import[img]);
  	if (files.import[img]) {
  		el.src = '../imgs/to_right.png';
  	} else {
  		el.src = '../imgs/left.png';
  	}
  }
  
  function selectRemoveFromLocal(el, img) {
  	files.delete[img] = !(files.delete[img]);
  	if (files.delete[img]) {
  		el.src = '../imgs/editdelete.png';
  	} else {
  		el.src = '../imgs/file_broken.png';
  	}
  }
  
  var files = new Array();
  files.import = new Array();
  files.delete = new Array();
  
  function prepareSubmit(form) {
  $form = $('#' + form.id);
	for(var file in files.import) {
	  if (files.import[file]) {
	  	$form.append($('<input type="hidden" name="imports" value="' + file + '" />'));
	  }
	} 	
	for(var file in files.delete) {
	  if (files.delete[file]) {
	  	$form.append($('<input type="hidden" name="deletes" value="' + file + '" />'));
	  }
	}
	return true;
  }

</script>
<div style="margin-top: 10px">
	<span class="container" style="padding-top: 15px;">
		<s:text name="general.show"></s:text>:
		<img src="../imgs/ok.png" width="25px" height="25px"/>
		<img src="../imgs/file_broken.png" width="25px" height="25px"/>
		<img src="../imgs/left.png" width="25px" height="25px"/>			
		<img src="../imgs/editdelete.png" width="25px" height="25px"/>
		<img src="../imgs/to_right.png" width="25px" height="25px"/>			
	</span>
	<span class="container" style="padding-top: 15px;">
		<s:text name="general.all"></s:text>
		<img src="../imgs/file_broken.png" width="25px" height="25px"/>
		<span><s:text name="general.to"></s:text></span>
		<img src="../imgs/editdelete.png" width="25px" height="25px"/>
	</span>
	<span class="container" style="padding-top: 15px;">
		<s:text name="general.all"></s:text>
		<img src="../imgs/left.png" width="25px" height="25px"/>			
		<span><s:text name="general.to"></s:text></span>
		<img src="../imgs/to_right.png" width="25px" height="25px"/>			
	</span>
</div>
<ul id="sync_list" style="clear:both;">
	<li>
		<div class=" " >
			<div style="width: 205px; float: left; padding-left: 30px;">
				<s:text name="sync.local"></s:text>
			</div>
			<div style="width:12%; float: left;">&nbsp;</div>		
			<div style=" width: 205px;  float: right;" >
				<s:text name="sync.remote"></s:text>
			</div>
		</div>
	</li>
	<li>&nbsp;</li>
	<s:iterator id="sync" value="synchronizationResult">
		<li>
			<div class="myBox container roundCorners" style="">
				<div class="imageInfo" style="float: left; width: 42%;">
					<s:if test="%{#sync.local != null}" >
						<s:text name="sync.image.name"></s:text>:
						<s:property id="sync" value="local.name"/><br/>
						<s:text name="sync.image.type"></s:text>:
						<s:property id="sync" value="local.contentType"/><br/>
						<s:text name="sync.image.date"></s:text>:
						<s:property id="sync" value="local.updated"/><br/>
					</s:if>
					<s:else>
						<div style="width: 205px;">&nbsp;</div>
					</s:else>
				</div>
				<div style="float: left; width:12%;">	
					<s:if id="sync" test="%{'SYNCRONIZED' == #sync.status.toString()}" >
						<img src="../imgs/ok.png" width="50px" height="50px"/>
					</s:if>
					<s:elseif test="%{'MISSING_ON_LOCAL' == #sync.status.toString()}">
						<img src="../imgs/left.png" width="50px" height="50px" onclick="javascript: selectImportOnLocal(this, '<s:property id="sync" value="remote.name"/>');"/>
						<script type="text/JavaScript"> files.import['<s:property id="sync" value="remote.name"/>'] = false; </script>
					</s:elseif>
					<s:else>
						<img src="../imgs/file_broken.png" width="50px" height="50px" onclick="javascript: selectRemoveFromLocal(this, '<s:property id="sync" value="local.name"/>');"/>
						<script type="text/JavaScript"> files.delete['<s:property id="sync" value="local.name"/>'] = false; </script>
					</s:else>
				</div>
				<div class="imageInfo" style=" width: 42%;float: right; ">
					<div style="float: right; width: 200px;">
					<s:if test="%{#sync.remote != null}" >
						<s:text name="sync.image.name"></s:text>:
						<s:property id="sync" value="remote.name"/><br/>
						<s:text name="sync.image.type"></s:text>:
						<s:property id="sync" value="remote.contentType"/><br/>
						<s:text name="sync.image.date"></s:text>:
						<s:property id="sync" value="remote.updated"/><br/>
					</s:if>
					<s:else>
						<div style="width: 205px;">&nbsp;</div>
					</s:else>
					</div>
				</div>
			</div>
		</li>
	</s:iterator>
</ul>

<div class="container">
	<s:form action="../galleries/FsSync.action" id="synchronize" onsubmit="return prepareSubmit(this);">
		<input type="hidden" name="mode" value="SYNC" /> 
		<s:hidden name="galleryId"></s:hidden> 
		<s:submit cssClass="action" key="sync.submit"></s:submit>
	</s:form>
</div>